<template>
  <view class="container">
    <!-- 联系人 -->
    <view class="itme">
      <view>联系人</view>
      <input type="text" style="margin-left: 68rpx; flex: 1" v-model="name" />
    </view>
    <!-- 手机号-->
    <view class="itme">
      <view>手机号</view>
      <input type="text" style="margin-left: 68rpx; flex: 1" v-model="mobile" />
    </view>
    <!-- 地址 -->
    <view class="itme" @click="chooseaddress">
      <view>地址</view>
      <view style="display: flex; justify-content: space-between; align-items: center; flex: 1; margin-left: 68rpx">
        <view style="flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical">{{ address }}</view>
        <uni-icons type="right" size="20" color="#000"></uni-icons>
      </view>
    </view>
    <!-- 详细地址 -->
    <view class="itme">
      <view>详细地址</view>
      <input type="text" style="margin-left: 68rpx; flex: 1" v-model="detail_address" />
    </view>
    <!-- 设为默认地址 -->
    <view class="itme" style="justify-content: space-between">
      <view>设为默认地址</view>
      <switch color="#3B58E8" :checked="is_default == '1' ? true : false" @change="change" style="transform: scale(0.7)" />
    </view>
    <!-- 提交 -->
    <view class="submit" @click="addaddress">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      mobile: '',
      address: '',
      detail_address: '',
      is_default: '2',
      lat: '',
      lon: ''
    };
  },
  methods: {
    // 新增地址
    async addaddress() {
      if (this.name == '') {
        return uni.showToast({
          title: '请输入名字',
          icon: 'none'
        });
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.mobile) || this.mobile == '') {
        return uni.showToast({
          title: '输入的手机号格式不正确，请重新输入',
          icon: 'none'
        });
      }

      if (this.address == '' || this.detail_address == '') {
        return uni.showToast({
          title: '请输入地址和详细地址',
          icon: 'none'
        });
      }

      const res = await uni.$http.post('/address/add', {
        name: this.name,
        mobile: this.mobile,
        address: this.address,
        detail_address: this.detail_address,
        is_default: this.is_default,
        lat: this.lat,
        lon: this.lon
      });
      if (res.data.code == 1) {
        uni.redirectTo({
          url: '/parents/addresslist/addresslist'
        });
      }
    },
    // 选择位置
    chooseaddress() {
      uni.chooseLocation({
        success: (res) => {
          console.log('选择的位置', res);
          this.lat = res.latitude;
          this.lon = res.longitude;
          this.address = res.address.split('区')[0] + '区';
        }
      });
    },
    // 是否默认地址
    change(e) {
      this.is_default = e.detail.value ? '1' : '2';
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .itme {
    box-sizing: border-box;
    display: flex;
    align-items: center;

    width: 750rpx;
    height: 120rpx;
    padding: 40rpx;
    background: #ffffff;
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 60rpx;
    left: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #3553e8;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    border-radius: 100rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
